# Avatar

<Subtitle>An easily stylable avatar component.</Subtitle>
<Meta
  name="description"
  content="A high-quality, unstyled React avatar component that is easy to customize."
/>

import { DemoAvatarHero } from './demos/hero';

<DemoAvatarHero />

## Anatomy

Import the component and assemble its parts:

```jsx title="Anatomy"
import { Avatar } from '@base-ui-components/react/avatar';

<Avatar.Root>
  <Avatar.Image src="" />
  <Avatar.Fallback>LT</Avatar.Fallback>
</Avatar.Root>;
```

## API reference

<Reference component="Avatar" parts="Root, Image, Fallback" />
